<template>
  <div>
        <el-container style="height: 700px; border: 1px solid #eee">
      <el-header style="font-size:40px;background-color: rgb(238, 241, 246)" >talis智能学习辅助系统</el-header>
      <el-container>
        <el-aside width="250px" style="border: 1px solid #eee">
            <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <el-menu :default-openeds="['1', '3']">
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-message"></i>系统信息管理</template>
              <el-menu-item index="1-1">
                <router-link to="/dept" >部门管理</router-link>
              </el-menu-item>

              <el-menu-item index="1-2">
                 <router-link to="/emp" >员工管理</router-link>
              </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
        </el-aside>


        <el-main>
            <el-form :inline="true" :model="searchForm" class="demo-form-inline">
              <el-form-item label="姓名">
                <el-input v-model="searchForm.name" placeholder="姓名"></el-input>
              </el-form-item>
              <el-form-item label="性别">
                <el-select v-model="searchForm.gender" placeholder="性别">
                  <el-option label="男" value="1"></el-option>
                  <el-option label="女" value="2"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
        
                <span class="demonstration">入职时间：从</span>
                <el-date-picker
                  v-model="searchForm.entryDate"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>

            </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
              </el-form-item>
            </el-form>

            <el-table :data="tableData" border >
            <el-table-column prop="name" label="姓名" width="180" align="center">
            </el-table-column>
            <el-table-column label="图片" width="180" align="center">
                <template slot-scope="scope">
                 <img :src="scope.row.image" width="100px" height="70px">
                </template>
            </el-table-column>
            <el-table-column  label="性别"  width="140" align="center">
                <template slot-scope="scope">
                {{ scope.row.gender==1?"男":"女" }}
                </template>
            </el-table-column> 
              <el-table-column prop="job" label="职位" width="140" align="center">
            </el-table-column>
            <el-table-column prop="entryDate" label="入职时间" width="180" align="center">
            </el-table-column>
              <el-table-column prop="updateTime" label="最后操作时间" width="230" align="center">
              </el-table-column>
              <el-table-column label="操作" align="center">
                <el-button type="primary" size="mini">编辑</el-button>
                <el-button type="danger" size="mini">删除</el-button>
            </el-table-column>
            </el-table>


            <br>
            <el-pagination 
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            background layout="sizes,prev, pager, next,jumper,total" :total=counts>
            </el-pagination>  
      
        </el-main>
      </el-container>
    </el-container>
      </div>
</template>



<script>
 import axios from 'axios';

 export default {  
    data() {  
        return {  
            tableData: [],  
            searchForm: {  
                name: '',  
                gender: '',
                entryDate: []  
            },  
            counts: 0,
             page: 1,
             pageSize: 10,
           
        }  
    },  
  

    methods: {  
         async onSubmit() {  
            
                const params={
                  page:this.page,
                  pageSize:this.pageSize,
                  name:this.searchForm.name? this.searchForm.name: undefined ,
                  gender:this.searchForm.gender? this.searchForm.gender: undefined ,
                  entryDate:this.searchForm.entryDate? this.searchForm.entryDate: undefined
                };
              
              const getEmpPage =  (params) => {
                return axios({
                 url: 'http://192.168.138.101/Api/emps',
                 method: 'get',
                 params
                 })
              }
              let res =await getEmpPage(params);
              if (res.data.code === 1) {
                this.tableData = res.data.data.rows; 
                this.counts = res.data.data.total;
              }
              else {
                this.$message.error(res.data.message);
              }
               
             },
         
        handleSizeChange(val) {  
            // console.log(`每页 ${val} 条`);  
            alert("每页记录数变化" + val);  
        },  
        handleCurrentChange(val) {  
            // console.log(`当前页: ${val}`);  
            alert("页码发生变化:" + val);  
        },  


        async fetchData() {  
      try {  
        const result = await axios.get("http://192.168.138.101/Api/emps");  
        this.tableData = result.data.data.rows;  
        this.counts = result.data.data.total;
      } catch (error) {  
        console.error(error); // 处理请求错误或其他意外错误  
      }  
    },  
  },  

  mounted() {
      if (!this.$el) {
        console.log('Component is not yet mounted');
      } else {
        console.log('Component is already mounted');
        this.fetchData();
      }
    },
     
  };

</script>




<style>
/* el-table{
    text-align: center;

} */
  
</style>